<template>
  <div>
    <Header></Header>
    <div class="detail-header">
      <div class="header-box">
        <div class="detail-header-map" style="color: rgba(255, 255, 255, 0.5)">
          <el-breadcrumb style="color: #fff" :separator-icon="ArrowRight">
            <el-breadcrumb-item>课程</el-breadcrumb-item>
            <el-breadcrumb-item>免费课</el-breadcrumb-item>
            <el-breadcrumb-item
              >MySQL数据库（上）- 基础入门
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="detail-header-title">MySQL数据库（上）- 基础入门</div>
        <div class="detail-header-content">
          <div class="tearch-info">
            <img src="@/assets/img/teacher/teacher1.jpg" alt="" />
            <span>令狐大侠</span>
          </div>
          <div class="course-info">
            <div class="course-info-item">
              <span class="meta">难度</span>
              <span class="meta-value">入门</span>
            </div>
            <div class="course-info-item">
              <span class="meta">时长</span>
              <span class="meta-value"> 2小时 0分</span>
            </div>
            <div class="course-info-item">
              <span class="meta">学习人数</span
              ><span class="meta-value js-learn-num">5822</span>
            </div>
            <div class="course-info-item">
              <span class="meta">综合评分</span
              ><span class="meta-value">9.93</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="course-menu">
      <ul class="course-menu-ul">
        <li>
          <span class="meta">章节</span>
        </li>

        <li>
          <span class="num">6</span>
          <span class="meta">问答</span>
        </li>
        <li>
          <span class="meta">笔记</span>
        </li>
        <li>
          <span class="num">1</span>
          <span class="meta">评价</span>
        </li>
        <li>
          <span class="meta">WIKI</span>
        </li>
      </ul>

      <!-- <div class="tab-main"></div> -->
    </div>
    <div class="tab-main">
      <div class="tab-main-box">
        <div class="tab-main-content">
          <!-- 课程简介 -->
          <div class="course-description course-box">
            简介：AI时代2.0，各企业迅速融合LLM大模型，提效降本，大模型技能已是必备技能。本课程专为LLM零基础用户设计，带你快速了解大模型、市场需求、局限性核心的概念，以及市场所需的Agentf方案。全套详细体系学习LLM大模型，请点击https://class.imooc.com/sale/llmappdev或者https://class.imooc.com/sale/llmalgorithm
            课，扫二维码详细咨询。
          </div>
          <!-- 课程章节 -->
          <div class="course-chapter">
            <div class="chapter course-box">
              <!-- 章节标题 -->
              <h3>第1章 课程介绍</h3>
              <!-- 章节描述 -->
              <div class="chapter-description">
                本章主要对课程内容进行整体介绍，让大家对课程内容有一定的了解
              </div>
              <!-- 章节列表 -->
              <ul class="chapter-list">
                <li class="chapter-list-item">
                  <svg
                    class="video-icon"
                    aria-hidden="true"
                    style="height: 16px; width: 16px"
                  >
                    <use xlink:href="#icon-shipin"></use>
                  </svg>
                  <em class="type-text">视频:</em>
                  2-2 -2-Streamlit API使用指南
                </li>
                <li class="chapter-list-item">
                  <svg
                    class="video-icon"
                    aria-hidden="true"
                    style="height: 16px; width: 16px"
                  >
                    <use xlink:href="#icon-shipin"></use>
                  </svg>
                  <em class="type-text">视频:</em>
                  2-2 -2-Streamlit API使用指南
                </li>
                <li class="chapter-list-item">
                  <svg
                    class="video-icon"
                    aria-hidden="true"
                    style="height: 16px; width: 16px"
                  >
                    <use xlink:href="#icon-shipin"></use>
                  </svg>
                  <em class="type-text">视频:</em>
                  2-2 -2-Streamlit API使用指南
                </li>
                <li class="chapter-list-item">
                  <svg
                    class="video-icon"
                    aria-hidden="true"
                    style="height: 16px; width: 16px"
                  >
                    <use xlink:href="#icon-shipin"></use>
                  </svg>
                  <em class="type-text">视频:</em>
                  2-2 -2-Streamlit API使用指南
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="tab-main-aside">
          <div class="course-box course-aside-info">
            <div class="learn-btn">
              <a style="display: block" class="yyx-btn yyx-btn-red yyx-btn-lg">
                开始学习
              </a>
            </div>
            <div class="course-info-tip">
              <dl class="tip-first">
                <dt>课程须知</dt>
                <dd class="autowrap">
                  1、本课程适合对AI大模型有一定了解的互联网领域人群学习
                </dd>
              </dl>
              <dl>
                <dt>老师告诉你能学到什么？</dt>
                <dd class="autowrap">
                  1、学习Streamlit会话管理及使用指南
                  2、能够将Streamlit部署到云端
                  3、能够通过Streamlit实现聊天机器人案例，快速落地
                </dd>
              </dl>
            </div>
          </div>
          <div class="course-recom-box">
            <div class="mb40 recom-list-box">
              <h4>推荐课程</h4>
              <ul>
                <li>
                  <div class="aside-course-img">
                    <img src="@/assets/img/course/a.jpg" />
                    <p class="aside-course-type">实战</p>
                  </div>
                  <div class="aside-course-content">
                    <a class="aside-course-name" target="_blank"
                      >AI+云原生应用开发 从设计到部署运维全链路实战与提效</a
                    >
                    <p class="aside-course-price"><span>￥399.00</span></p>
                    <!-- <div class="aside-course-dot">
                      <i class="imv2-dot_samll"></i>
                    </div> -->
                    <p class="aside-course-grade">中级</p>
                    <div class="aside-course-dot">
                      <!-- <i class="imv2-dot_samll"></i> -->
                    </div>
                    <p class="aside-course-people">
                      <!-- <i class="imv2-set-sns"></i> -->
                      <el-icon style="position: relative; top: 1px; left: -1px"
                        ><UserFilled
                      /></el-icon>

                      <span>51</span>
                    </p>
                  </div>
                </li>
                <li>
                  <div class="aside-course-img">
                    <img src="@/assets/img/course/a.jpg" />
                    <p class="aside-course-type">实战</p>
                  </div>
                  <div class="aside-course-content">
                    <a class="aside-course-name" target="_blank"
                      >AI+云原生应用开发 从设计到部署运维全链路实战与提效</a
                    >
                    <p class="aside-course-price"><span>￥399.00</span></p>
                    <!-- <div class="aside-course-dot">
                      <i class="imv2-dot_samll"></i>
                    </div> -->
                    <p class="aside-course-grade">中级</p>
                    <div class="aside-course-dot">
                      <!-- <i class="imv2-dot_samll"></i> -->
                    </div>
                    <p class="aside-course-people">
                      <!-- <i class="imv2-set-sns"></i> -->
                      <el-icon style="position: relative; top: 1px; left: -1px"
                        ><UserFilled
                      /></el-icon>
                      <span>51</span>
                    </p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script setup lang="ts">
import Header from "@/components/common/Header.vue";
import Footer from "@/components/common/Footer.vue";

import { ArrowRight, UserFilled, Avatar } from "@element-plus/icons-vue";
</script>

<style scoped lang="less">
.detail-header {
  width: 100%;
  height: 190px;
  background: url("@/assets/img/background/bg1.png") no-repeat;
  background-size: 100% 100%;
  .header-box {
    width: 1152px;
    margin: 0 auto;
    padding: 16px 0;
    z-index: 99;

    //   line-height: 24px;
    :deep(.el-breadcrumb__separator) {
      color: rgba(255, 255, 255, 0.5);
      font-size: 12px;
    }
    :deep(.el-breadcrumb__inner) {
      color: rgba(255, 255, 255, 0.5);
      font-size: 12px;
    }
    .detail-header-title {
      font-size: 32px;
      font-weight: 500;
      color: #fff;
      padding-top: 16px;
    }
    .detail-header-content {
      display: flex;
      align-items: center;

      .tearch-info {
        line-height: 12px;
        padding-top: 15px;

        img {
          width: 48px;
          height: 48px;
          border-radius: 100%;
        }
        span {
          font-size: 14px;
          line-height: 22px;
          font-weight: 700;
          color: #fff;
          position: relative;
          top: 8px;
          left: 10px;
        }
      }
      .course-info {
        display: flex;
        margin-left: 60px;
        align-items: center;
        margin-top: 18px;
        .course-info-item {
          width: 100px;

          margin-left: 16px;
          font-size: 12px;
          top: 15px;
          color: #fff;
          .meta {
            padding-right: 8px;
            line-height: 12px;
            font-size: 12px;
            font-weight: 700;
          }
        }
      }
    }
  }
}
.course-menu {
  height: 68px;
  line-height: 68px;
  background: #fff;
  box-shadow: 0 4px 8px 0 rgba(28, 31, 33, 0.1);

  ul {
    display: flex;
    max-width: 1152px;
    margin: 0 auto;
    // width: 1152px;

    li {
      margin-right: 80px;
      position: relative;
      .meta {
        display: inline-block;
        font-size: 16px;

        line-height: 37px;
        font-weight: bold;
        cursor: pointer;
      }
      .num {
        position: absolute;
        font-size: 12px;
        font-weight: 200;
        color: #9199a1;
        line-height: 18px;
        top: 10px;
        left: 36px;
      }
    }
  }
}
.tab-main {
  max-width: 1152px;
  margin: 0 auto;
  margin-bottom: 40px;
  .tab-main-box {
    padding-right: 352px;
    margin-bottom: 29px;
    overflow: visible;
    display: flex;

    .tab-main-content {
      padding-top: 36px;
      width: 100%;

      .course-chapter {
        h3 {
          color: #1c1f21;
          font-size: 16px;
          font-weight: 700;
          line-height: 24px;
        }
        .chapter-description {
          margin-top: 2px;
          font-size: 12px;
          color: #545c63;
          line-height: 18px;
        }
        .chapter-list {
          padding-top: 16px;
          li {
            position: relative;
            padding-left: 12px;
            height: 48px;
            line-height: 48px;
            list-style: none;
            .video-icon {
              // font-size: 16px;
              color: #1c1f21;
              // line-height: 48px;
              margin-right: 8px;
              position: relative;
              top: 3px;
            }
            .type-text {
              font-style: normal;
              font-weight: 700;
              font-size: 14px;
              line-height: 48px;
              margin-right: 4px;
            }
            span {
              color: #1c1f21;
              display: block;
              overflow: hidden;
              word-break: break-all;
              display: -webkit-box;
              display: -moz-box;
              display: -webkit-flex;
              display: -moz-flex;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-align: center;
              -ms-flex-align: center;
              -webkit-align-items: center;
              align-items: center;
              font-size: 14px;
              line-height: 48px;
            }
          }
        }
      }
    }
    .tab-main-aside {
      margin-top: -148px;
      margin-right: -352px;
      margin-left: 30px;
      width: 320px;
      position: relative;
      z-index: 2;

      .course-aside-info {
        margin-bottom: 32px;
        min-height: 400px;
        position: relative;
        z-index: 901;
        .course-info-tip {
          padding-top: 20px;
          .tip-first {
            margin-bottom: 24px;
          }
          dt {
            margin-bottom: 6px;
            font-weight: 700;
            font-size: 14px;
          }
          dd {
            font-size: 12px;
            line-height: 24px;
            color: #545c63;
            white-space: pre-line;
          }
        }
      }
      .course-recom-box {
        h4 {
          margin-bottom: 12px;
        }
        ul {
          background: #f8fafc;
          li {
            .aside-course-img {
              float: left;
              width: 80px;
              height: 60px;
              border-radius: 6px;
              overflow: hidden;
              position: relative;
              img {
                width: 80px;
                height: 60px;
                border-radius: 6px;
              }
              .aside-course-type {
                position: absolute;
                left: 0;
                top: 0;
                font-size: 12px;
                color: #ffffff;
                line-height: 18px;
                padding: 2px 4px;
                background: #1c1f21;
                border-radius: 6px 0 6px 0;
              }
            }
            .aside-course-content {
              margin-left: 96px;
              height: 67px;
              position: relative;
              box-sizing: border-box;
              font-size: 12px;
              color: #545c63;
              line-height: 18px;
              border-bottom: 1px solid rgba(43, 51, 59, 0.1);
              .aside-course-name {
                padding-top: 8px;
                font-size: 14px;
                height: 22px;
                line-height: 22px;
                margin-bottom: 4px;
                cursor: pointer;
                color: #545c63;
                background: #f8fafc;
                -webkit-transition: all 0.3s;
                -moz-transition: all 0.3s;
                transition: all 0.3s;
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .aside-course-price {
                font-weight: bold;
                float: left;
              }
              .aside-course-grade {
                float: left;
                margin-left: 10px;
              }
              .aside-course-people {
                float: left;
                margin-left: 10px;
              }
            }
          }
        }
      }
    }
  }
}

.course-box {
  margin-bottom: 8px;
  padding: 24px 32px 32px;
  background: #fff;
  box-shadow: 0 8px 16px 0 rgba(7, 17, 27, 0.1);
  border-radius: 12px;
  line-height: 28px;
  white-space: pre-line;
}
.yyx-btn-lg {
  padding: 11px 32px;

  font-size: 16px;
  line-height: 24px;
  border-radius: 24px;
}
.yyx-btn-red {
  border-style: solid;
  border-width: 1px;
  cursor: pointer;

  transition: all 0.3s;
  color: #fff;
  background-color: rgb(109, 40, 210);
  border-color: rgb(109, 40, 210);
  opacity: 1;
}
.yyx-btn {
  // position: relative;

  margin-bottom: 0;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;

  box-sizing: border-box;
  background-image: none;

  white-space: nowrap;
  outline: none;

  user-select: none;
  border-style: solid;
}
.mb40 {
  margin-bottom: 40px;
}
</style>
